<div *ngIf="lrtmService.tasks.length > 0" id="taskManager" [ngClass]="{'open': expanded}">
    <!-- current tasks -->
    <div class="px-2">
        <div class="d-flex align-items-start">
            <div class="mr-auto d-flex align-items-center text-white bold">
                <div class="pointer" [ngClass]="{'text-center': !expanded}" (click)="expanded = !expanded">
                    <h6 *ngIf="!expanded" class="mr-auto ml-2"><i class="ti-download"></i> Tasks</h6>
                    <div class="gauge-markup" [attr.data-fill]="percentComplete" [attr.data-display]="numCompletedTasks+'/'+lrtmService.tasks.length"><span></span></div>
                </div>
                <h6 *ngIf="expanded" class="mr-auto ml-2">Task Manager</h6>
            </div>
            <h6 *ngIf="expanded" class="ml-auto text-right pointer mb-0" (click)="expanded = !expanded">HIDE <i class="ti-angle-right ml-1"></i></h6>
        </div>
        <div *ngIf="expanded" class="pl-4">
            <task *ngFor="let task of lrtmService.tasks;let index=index" [expanded]='expanded' [index]='index' [task]='task'></task>
        </div>
    </div>
</div>